<template>
  <div class="main-header">
    <div class="title">{{title}}</div>

    <div class="nav-list">
      <ul class="content">
        <li
          v-for="item of navList"
          :key="item.name"
          style="list-style-type:none"
          :class="{'nav-active':isActive (item.path)}"
          @click="navClick(item.path)"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "Music",
    },
  },
  data() {
    return {
      navList: [
        { path: "/recommend", name: "推荐" },
        { path: "/singer", name: "歌手" },
        { path: "/rank", name: "排行" },
        { path: "/search", name: "搜索" },
      ],
    };
  },
  methods: {
    navClick(path) {
      this.$emit("nav-click", path);
    },
    isActive(path) {
      if (path === this.$route.path) {
        return true;
      }
      if (path === "/recommend" && this.$route.path === "/") {
        return true;
      }
      return false;
    },
  },
};
</script>
<style scoped>
.title {
  color: #07c160;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.content {
  display: flex;
  justify-content: space-around;
  padding: 3px;
  font-size: 16px;
  color: rgba(26, 26, 26, 0.5);
}
.nav-active {
  color: #07c160;
  font-weight: 700;
}
</style>